<!--  -->
<template>
  <view
    class="vip-card"
    :style="{
      background: ` linear-gradient(135deg, #fbe5c3 0%, #f2c890 100%)`,
    }"
    @click="$emit('click')"
  >
    <image class="bg-img" :src="bgImg" mode="scaleToFill" />
    <slot />
  </view>
</template>

<script lang="ts" setup>
  import bgImg from '@/assets/images/vip-bg.png';
  const emit = defineEmits(['click']);
</script>

<style lang="scss" scoped>
  .vip-card {
    // background: linear-gradient(135deg, #fbe5c3 0%, #f2c890 100%);
    border-radius: 20rpx;
    border: 2rpx solid #f2c890;
    min-height: 176rpx;
    position: relative;
    padding: 32rpx;
    box-sizing: border-box;
    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }
</style>
